<template>
	<view class="app-bilis" :style="{height:(receHeight-60)+'px'}">
		<view class="tab-navs" v-if="showPopule">
			<view class="tab-navs-content">
				<!-- <scroll-view class="scroll-term_H" scroll-y="true"> -->
					<block v-for="(item,ind) in tabObjectList" :key="ind">
						<view class="scroll-term-item_H" :class="index == ind ?'act':''" @tap="changItem(item,ind)">
							{{item[1]}}
						</view>
					</block>
				<!-- </scroll-view> -->
			</view>
			
		</view>
		
		<view class="bill-nav-top" v-if="index!=0">
			<view class="bill-nav-top-item">
				<text>{{i18n.all}}{{nav}}</text>
				<view>{{sum}}</view>
			</view>
			<view class="bill-nav-top-item">
				<text>{{i18n.today}}{{nav}}</text>
				<view>{{day_sum}}</view>
			</view>
		</view>
		
		<view class="bilis-content">
			<template v-if="lists.length > 0">
				<view class="list" >
					<block v-for="(item,index) in lists" :key="index" v-if="lists.length">
						<view class="list-item">
							<view class="list-item-i">
								<view class="item-t">
									<!-- <image src="../../static/imgs/purse-top-logo.png" mode=""></image> -->
									<view class="item-h">
										<text>{{item.time}}</text>
										<text>{{item.username}}</text>
									</view>
								</view>
							</view>
							<view class="list-item-i">
								<text>{{item.typeStr}}</text>
							</view>
							<view class="list-item-i">
								<text>{{item.num}}</text>
							</view>
						</view>
					</block>
				</view>
			</template>
			<template v-else>
				<view class="nodata">{{i18n.nodata}}</view>
			</template>
		</view>
		<view class="mask" v-if="showPopule" @tap.stop="showPopule=!showPopule"></view>
		<view class="showLoads" v-if="showLoads">{{i18n.load_more}}...</view>
		<view class="masks" v-if="showLoads"></view>
	</view>
</template> 


<script>
	import Load from "../../components/common/load.vue"
	import {fetch, showToast, pageback, pageto, forceUpdate, checkLogin} from '@/common/js/util.js'
	import {mapGetters} from 'vuex' 
	let timer;
	export default {
		computed:  {
			i18n() {
				return this.$t('message');
			},
			...mapGetters([
				'getRequestUrl',
				"getLoginInfo",
				'getTextArr',
				'getLangType',
				'getLang'
			])
		},
		data() {
			return {
				showLoads:false,
				showLoadings:false,
				index: 0,
				tabObjectList: [],
				page:1,
				rows:30,
				incomeId:0,
				lists:[],
				receHeight:'',
				showPopule:false,
				isCheck:false,
				nav:'',
				day_sum:'',
				sum:''
			}
		},
		onNavigationBarButtonTap(e){
			if(e.index==0){
				this.showPopule = !this.showPopule
			}
		},
		onLoad(){
			let _this = this
			uni.getSystemInfo({
			    success: function (res) {
			       _this.receHeight =  res.windowHeight
			    }
			});
			console.log(_this.receHeight);
			_this.page = 1;
			_this.lists =[]
			_this.getThings(_this.page,_this.rows);
		},
		onShow(){
			uni.setNavigationBarTitle({
				title:this.getLang==1?'账单':'Bill'
			})
			// this.getList();
		},
		onPullDownRefresh() {
			
			this.page =1;
			this.lists =[]
		    this.getThings();
		},
		onReachBottom() {
			let _self = this
				//触底的时候请求数据，即为上拉加载更多
				//为了更加清楚的看到效果，添加了定时器
		    if (timer != null) {
		        clearTimeout(timer);
		    }
		    timer = setTimeout(function() {
		        _self.getThings();
		    }, 1000);
					
					// 正常应为:
					// _self.getmorenews();
		},
		methods: {
			back() {
				pageback()
			},
			changItem(e,i){
				this.showPopule = !this.showPopule
				this.index = i;
				this.page=1;
				this.lists =[]
				this.incomeId = e[0];
				this.nav = e[1];
				// console.log(this.incomeId );
				this.getThings(this.page,this.rows);
			},
			objectChange(e){
				// console.log(e.tab.indexA);
				this.page=1;
				this.lists =[]
				this.incomeId = e.tab.indexA;
				this.getThings(this.page,this.rows);
			},
			getThings(page = 1, rows = this.rows){
				let url_ = this.getRequestUrl + "/api/User/detailed";
				let data_ ={
					id:this.getLoginInfo.id,
					token:this.getLoginInfo.token,
					type: this.index>0?this.tabObjectList[this.index][0]:'0',
					rows,
					page:this.page
				}
				if(this.page>1){
					this.showLoads = true;
				}
				if(this.isCheck)return;
				this.isCheck = true;
				// uni.showLoading()
				this.showLoadings = true;
				fetch(url_,data_,'POST').then(res=>{
					// console.log(res);
					uni.stopPullDownRefresh();
					this.isCheck = false;
					this.showLoadings = false;
					this.day_sum = res.data.data.day_sum
					this.sum = res.data.data.sum
					this.tabObjectList = Object.entries(res.data.data.type)
					this.incomeId = this.tabObjectList[0][0]
					// console.log(res.data.data.data.data.length);
					checkLogin(this.getLoginInfo,this.getRequestUrl);
					if(res.data.data.data.data.length ==0){
						showToast(this.i18n.nodata)
						uni.hideNavigationBarLoading();
						return;
					}
					if(res.data.code){
						if(this.page ==1){
							this.page ++;
							uni.stopPullDownRefresh();
							this.lists = res.data.data.data.data;
							// console.log(res);
							this.lists.forEach((item,index)=>{
								this.lists[index].num = item.num
								// this.lists[index].pcs = _self.i18n.BlockPackage
							})
						}else{
							this.showLoads = false;
							this.page ++;
							let lists = res.data.data.data.data;
							lists.forEach((item,index)=>{
								lists[index].num = item.num
								// lists[index].pcs = _self.i18n.BlockPackage
							})
							// this.day_sum = res.data.data.day_sum+"";
							this.lists = this.lists.concat(lists)
							// console.log(this.lists)
						}
					}else{
						uni.showToast(res.data.msg)
					}
				}).catch(err=>{
					this.isCheck = false;
					// uni.hideLoading()
					this.showLoadings = false;
					this.showLoads = false;
					uni.showToast(this.i18n.request_fail)
				})
			}
		},
		components: {
			Load
		}
	}
</script>

<style lang="scss" scoped>
	@import  '@/common/scss/variable.scss';
	@import  '@/common/scss/global.scss';
	.bill-nav-top{
		display: flex;
		justify-content: space-between;
		align-items: center;
		background-color: #1d7dff;
		color: $white;
		.bill-nav-top-item{
			flex: 1;
			padding: 40upx 0 40upx 30upx;
			text{
				font-size: 26upx;
			}
			view{
				margin-top: 20upx;
				font-size: 32upx;
				font-weight: normal;
			}
		}
	}
	.showLoads{
		position: fixed;
		left: 50%;
		top: 50%;
		transform: translate(-50%,-50%);
		z-index: 10;
		width: 350upx;
		height: 90upx;
		border-radius: 10upx;
		background-color: #FFFFFF;
		font-size: 30upx;
		line-height: 90upx;
		text-align: center;
	}
	.masks{
		position: fixed;
		top:0;  
		left:0;  
		z-index:8;  
		width:100%;  
		height:100vh;  
		background:rgba(0,0,0,0.4);
	}
	.mask{
		position: fixed;  
		top:0;  
		left:0;  
		z-index:8;  
		width:100%;  
		height:100vh;  
		background:rgba(0,0,0,0.4);  
	}
	.app-bilis{
		.tab-navs{
			z-index:9;  
			position: fixed;
			right: 20upx;
			top: 30upx;
			.tab-navs-content{
				position: relative;
				background-color: #FFFFFF;
				align-items: center;
				border-radius: 15upx;
				width: 250upx;
				// height: 480upx;
				&::before{
					position: absolute;
					width: 0; 
					height: 0;
					right: 10upx;
					top:-55upx;
					content: "";
					border-width: 30upx;
					border-style: solid;
					border-color: transparent #FFFFFF transparent transparent;
					transform: rotate(90deg); /*顺时针旋转90°*/
					
				}
				view{
					width: 250upx;
					text-align: center;
					border-bottom: 1upx solid #efefef;
					line-height: 80upx;
					font-size: 30upx;
					&:last-of-type{
						border-bottom: none;
					}
					&.act{
						color: $theme-color;
					}
				}
			}
		}
		.bilis-content{
			// float: right;
			// height: 100%;
			.list{
				padding: 0 30upx;
				.list-item{
					display: flex;
					align-items: center;
					justify-content: space-between;
					height: 130upx;
					border-bottom:2upx solid #efefef;
					&:last-child{
						border-bottom:none;
					}
					.list-item-i{
						flex: 1;
						&:nth-child(2){
							text-align: center;
						}
						&:last-child{
							width: 100upx;
							text-align: right;
						}
						text{
							font-size: 14px;
						}
						.item-t{
							overflow: hidden;
							display: flex;
							align-items: center;
							image{
								width: 48upx;
								height: 48upx;
								margin-right: 30upx;
							}
							.item-h{
								text{
									display: block;
									font-size: 12px;
									color: #a4a3a4;
									margin-bottom: 16upx;
									&:last-child{
										font-size: 14px;
										color: #000;
										font-weight: bold;
									}
								}
							}
						}
					}
				}
			}
		}
	}
</style>
